<template>
  <el-dialog
    title="区域管理"
    class="pointarea"
    top="20vh"
    :append-to-body="true"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :visible.sync="syncPointAreaDialog"
    width="450px"
  >
    <div class="pointarea_content">
      <div class="content-tip">
        <span class="content-section">区域名称</span>
        <span class="operation-section">操作</span>
      </div>
      <div
        class="pointarea__form"
        v-for="(item, idx) in communityList"
        :key="idx"
      >
        <el-input
          v-model="item.communityName"
          maxlength="15"
          class="pointarea__form--con"
        >
        </el-input>
        <el-button
          class="pointarea__form--delbtn operation-section"
          @click="deleteCommunity(item, idx)"
          type="text"
        >
          删除
        </el-button>
      </div>
      <el-button type="primary" @click="addNewArea">新增区域</el-button>
    </div>
    <div class="pointarea__footer">
      <el-button @click="syncPointAreaDialog = false">取 消</el-button>
      <el-button type="primary" @click="savaData">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
// import address from "@/views/goods/common/city.js";
import {
  Vue,
  Component,
  Emit,
  PropSync,
  Prop,
  Watch,
} from "vue-property-decorator";

@Component({})
export default class PointAreaDialog extends Vue {
  /** 区域管理设置弹框 */
  @PropSync("pointAreaDialog", { type: Boolean, default: false })
  syncPointAreaDialog: boolean;

  @Watch("syncPointAreaDialog")
  handleSyncPointAreaDialogChange() {
    this.communityList = JSON.parse(
      JSON.stringify(
        this.communities || [
          {
            communityId: "",
            communityName: "",
          },
        ],
      ),
    );
  }

  @Emit("savePointAreaDate")
  EmitSaveDate(data) {
    return data;
  }

  @Prop() communities;

  @Watch("communities")
  handleCommunitiesChange() {
    this.communityList = JSON.parse(
      JSON.stringify(
        this.communities || [
          {
            communityId: "",
            communityName: "",
          },
        ],
      ),
    );
  }

  /** 区域列表 */
  communityList = [
    {
      communityId: "",
      communityName: "",
    },
  ];

  delIds = [];

  addNewArea() {
    if (this.communityList.length === 20) {
      this.$message.error("上限20条");
      return false;
    }
    this.communityList.push({
      communityId: "",
      communityName: "",
    });
  }

  /**
   * 描述 删除某条
   */
  deleteCommunity(item, index) {
    if (!item.communityId.startsWith("temp")) {
      this.delIds.push(item.communityId);
    }
    this.communityList.splice(index, 1);
  }

  /**
   * 描述 保存数据
   */
  savaData() {
    const arr = this.communityList.filter(i => {
      i.communityId ||
        (i.communityId = `temp_${Math.random() * 10000}_${Math.random() *
          10000}`);
      return i.communityName.trim() !== "";
    });
    if (arr.length) {
      this.EmitSaveDate({ lists: arr, delIds: this.delIds });
    } else {
      this.syncPointAreaDialog = false;
    }
    this.communityList = [
      {
        communityId: "",
        communityName: "",
      },
    ];
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/logistics/pickPoint.scss";
.pointarea_content {
  max-height: 250px;
  overflow: auto;
  .operation-section {
    width: 70px;
    color: red;
    font-size: 14px;
    border: none;
    font-weight: 100;
  }
}
.content-tip {
  display: flex;
  line-height: 36px;
  background-color: #e9f3fb;
  margin-bottom: 12px;
  color: #111;
  font-weight: 600;
  .content-section {
    flex: 1;
    padding-left: 14px;
  }
  .operation-section {
    display: inline-block;
    width: 70px;
    font-size: 14px;
    text-align: center;
    color: #111;
    font-weight: 600;
  }
}
</style>
